<template>
    <div id="wai">
        <h1 class="title">{{ msg }}</h1>
        <div class="nei">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in orders_list" :key="item.order_id">
                    <div class="mui-navigate-right"
                        @click="order_info_or_go_pay(item.order_id, item.user_is_payment, item.create_time)">
                        <div class="mui-media-body">
                            <div @click.stop="go_shopping(item.goods_id)" class="zuo"><img
                                    :src="$http.defaults.baseURL + item.cover_img_path.slice(1)" alt="图片"></div>
                            <div class="you">商品名称：{{ item.name }}<p></p>购买数量：{{ item.count }}<p></p>商品价格：{{ item.order_price
                            }}￥</div>
                            <div class="you2">订单状态：{{
                                showText(item.user_is_payment, item.user_is_cancel, item.shller_is_cancle,
                                    item.is_send_out_goods)
                            }}<p></p>订单时间：{{ item.create_time }}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
                  
<script>


export default {
    data() {
        return {
            msg: '我的订单',
            session_id: this.$auth.getAuthorization(),
            orders_list: {}
        }
    },
    methods: {
        //获取订单列表
        get_orders() {
            this.$http.post('get_orders_list.php', { 'session_id': this.session_id },
                {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    }
                }).then(response => {
                    if (response.data.status === 1) {
                        // alert(response.data.message);
                        console.log(response.data.data);
                        this.orders_list = response.data.data;
                    } else {
                        // alert(response.data.message);
                        console.log(response.data.message);
                    }
                })
                .catch(error => {
                    console.error(error);
                });
        },
        //订单状态
        showText(a, b, c, d) {
            if (a == 0) {
                return '未支付';
            } else if (a == 1 && b == 0 && c == 0 && d == 0) {
                return '未发货';
            } else if (a == 1 && b == 0 && c == 0 && d == 1) {
                return '已发货';
            } else if (a == 1 && b == 0 && c == 1 && d == 0) {
                return '商家取消了订单';
            } else if (a == 1 && b == 0 && c == 1 && d == 1) {
                return '商家取消了订单，已发货';
            } else if (a == 1 && b == 1 && c == 0 && d == 0) {
                return '用户取消的订单';
            } else if (a == 1 && b == 1 && c == 0 && d == 1) {
                return '用户取消了订单，已发货';
            } else if (a == 1 && b == 1 && c == 1 && d == 0) {
                return '用户与商家都取消了订单';
            } else if (a == 1 && b == 1 && c == 1 && d == 1) {
                return '用户与商家都取消了订单，已发货';
            }
        },
        //跳转到购物页面
        go_shopping(goods_id) {
            // console.log(goods_id);
            this.$router.push({ name: 'goodsinfo', params: { id: goods_id } })
        },
        //判断订单是否超时
        limit_time_out(create_time) {
            const time = new Date(create_time);
            const now = new Date();
            const diffInMinutes = Math.floor((now - time) / (1000 * 60));
            return diffInMinutes > 10;
        },
        //去支付或者查看详情
        order_info_or_go_pay(order_id, user_is_payment, create_time) {
            if (user_is_payment == 0 && !this.limit_time_out(create_time)) {
                this.$router.push({
                    name: 'pay_info', params: {
                        id: order_id
                    }
                });
            } else if (user_is_payment == 0 && this.limit_time_out(create_time)) {
                // console.log('订单超时');
                alert('订单超时');
            } else {
                this.$router.push({
                    name: 'order_info', params: {
                        id: order_id
                    }
                });
            }
        }
    },
    mounted() {

    },
    created() {
        this.get_orders();
    },
    computed: {

    }


}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#wai {
    .title {
        font-size: 50px;
        margin-top: 2%;
    }
    .nei {
        height: 895px;
        overflow-y: scroll;
        .zuo {
            /* border: 1px solid red; */
            width: 8%;
            height: 8%;
            float: left;

            img {
                width: 100%;
                height: 50px;
            }
        }

        .you {
            /* border: 1px solid red; */
            width: 30%;
            height: 8%;
            /* float:right; */
            margin-left: 10%;
            font-size: 20px;
            margin-top: 5px;
            /* text-align: left; */
        }
        .you2 {
            /* border: 1px solid red; */
            width: 50%;
            height: 8%;
            /* float:right; */
            margin-left: 45%;
            font-size: 20px;
            margin-top: -43px;
            /* text-align: left; */
        }
    }
}
</style>
                                                                          